<template>
    <a-modal :visible="config.visible" @ok="handleOk()" @cancel="handleCancel()" :width="config.width">
      <template #title>
        {{config.title}}
      </template>
      <div>
        <ma-form v-if="typeof config.description == 'object'" :options="options" v-model="form" :columns="config.description" ref="crudForm" />

        <p v-else>{{config.description}}</p>
        
        </div>
    </a-modal>
</template>
<script setup>

import {provide, ref} from "vue";
const crudForm = ref()
const options = ref({
    showButtons:false
})
// 表单数据
const form = ref()
// 组件的字段设置

const config = ref({
    visible:false,
    title:'Title',
    width:'100%',
    description:'description',
    call:()=>{

    }
})

const handleOk = async ()=>{
    config.value.visible = false;
    console.log(form)
    await config.value.call(form.value);
}
const handleCancel = ()=>{
    config.value.visible = false;
}

const show = (title,description,call,width='100%') =>{
    config.value.title = title;
    config.value.description = description;
    config.value.call = call;
    config.value.width = width;
    console.log(config.value);
    config.value.visible = true;
}

defineExpose({show})
</script>
